@extends('public.common.common')
{{-- title 标题 --}}
@section('title')
注册-生活博客
@endsection

{{-- style 样式 --}}
@section('style')
  <link rel="stylesheet" href="/css/register.css">
@endsection

{{-- content 内容 --}}
@section('content')
<div class="container bd">
    <div class="row">
      <div class="offset-md-3 col-md-6">
        <div class="login">
          <form action="/public/register" method="POST" >
            <p><i class="icon layui-icon layui-icon-triangle-r"></i>注册</p>
            <div class="row my-3">
              <div class="col-md-3">
                <label for="uname">用户名</label>
              </div>
              <div class="col-md-6">
                <input type="text" name="uname" required autocomplete="off" class="@error('uname') is-invalid @enderror mb-2" id="uname" placeholder="用户名">
                @error('uname')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <span class="col-md-3 umess"></span>
            </div>
            <div class="row my-3">
              <div class="col-md-3">
                <label for="phone">手机号</label>
              </div>
              <div class="col-md-6">
                <input type="number" name="phone" class="@error('phone') is-invalid @enderror mb-2" required autocomplete="off" id="phone" placeholder="手机号">
                @error('phone')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <span class="phonemess col-md-3"></span>
            </div>
            <div class="row my-3">
              <div class="col-md-3">
                <label for="email">邮箱</label>
              </div>
              <div class="col-md-6">
                <input type="email" name="email" class="@error('email') is-invalid @enderror mb-2" required autocomplete="off" id="email" placeholder="邮箱">
                @error('email')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <span class="emailmess col-md-3"></span>
            </div>
            <div class="row my-3">
              <div class="col-md-3">
                <label for="password">密码</label>
              </div>
              <div class="col-md-6">
                <input type="password" name="password" class="@error('password') is-invalid @enderror mb-2" required autocomplete="off" id="password" placeholder="密码">
                @error('password')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <span class="col-md-3 pmess"></span>
            </div>
            <div class="row my-3">
              <div class="col-md-3">
                <label for="captcha">验证码</label>
              </div>
              <div class="col-md-6">
                <input type="text"  class="@error('captcha') is-invalid @enderror  w-50 mb-2" name="captcha" required autocomplete="off" id="captcha" placeholder="验证码">
                <img src="{{captcha_src()}}" alt="">
                @error('captcha')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
            </div>
            <div class="row my-3">
              <div class="col-md-6 offset-md-2">
              @csrf
                <button type="submit" class="btn btn-primary dosub">注 册</button>
              </div>
            </div>
          </form>
          
        </div>   
      </div>
      <div class="col-md-6 offset-md-3 text-right account">
        <a href="{{url('/public/login')}}">有账号，去登录</a>
      </div>
    </div>
  </div>
@endsection

{{-- script 脚本 --}}
@section('script')
var phoneReg = /^1[3-8][0-9]{9}$/;
    var emailReg = /^\w+?@(\w+\.)+\w+$/;
    var phoneFlag = false;
    var emailFlag = false;
    $('#phone').blur(function() {
      if($(this).val().match(phoneReg)) {
       $(this).removeClass('error');
       $('.phonemess').removeClass('merror').html('');
       phoneFlag = true;
     }else {
      $(this).addClass('error');
      phoneFlag = false;
      $('.phonemess').addClass('merror').html('<span class="badge badge-info mr-1">i</span>电话号码格式不正确');
     }
    });

    $('#email').blur(function() {
      if($(this).val().match(emailReg)) {
       $(this).removeClass('error');
       $('.emailmess').removeClass('merror').html('');
       emailFlag = true;
     }else {
      $(this).addClass('error');
      emailFlag = false;
      $('.emailmess').addClass('merror').html('<span class="badge badge-info mr-1">i</span>邮箱格式不正确 ');
     }
    })
    $('.dosub').click(function(e) {
      if(!uflag || !pflag || !cflag || !phoneFlag || !emailFlag) {
        e.preventDefault();
      }

    })

    $('img').click(function() {
      $(this).attr('src','{{url('/captcha/default?')}}'+Date.now()+Math.floor(Math.random()*8999+1000));
    })
@endsection